<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件</title>
</head>

<body>
  <div id="app">
    <!-- 使用组件标签必须有结束符 -->
    <my-component></my-component>
    <my-component />
  </div>
  <script src="../js/vue.js"></script>
  <script>
    /*
      组件：
        1. 定义组件
          const Xxx = Vue.extend(组件配置对象)
          注意：template来指定组件要渲染的内容，同时要渲染的内容必须有一个根标签
        2. 注册组件
          - 注册局部组件：只有当前组件可以使用
          components: {
            Xxx
          }
          - 注册全局组件：所有组件都可以使用
          Vue.component('Xxx', Xxx)
        3. 使用组件
          <Xxx />
          <Xxx></Xxx>
          注意：非脚手架环境，组件名称必须时 xxx-yyy 小写形式
               组件标签要有结束符

        4. 简写：定义和注册组件一起完成

        5. 面试题：为什么组件的data必须写成函数形式？
          如果data是对象，组件复用时所有组件会共享同一个data数据，
          当其中一个组件修改了data数据，其他复用组件都会发生变化，是有问题的

          如果data是函数，组件复用时调用data函数，产生一个新对象，
          此时复用组件的data就不再是同一个对象， 当其中一个组件修改了data数据，其他组件就不会发生变化
    */
    // 1. 定义组件
    // 2. 注册组件
    // 注册局部组件：只有当前组件可以使用
    // 注册全局组件：所有组件都可以使用
    // Vue.component('MyComponent', {
    //   // 组件配置对象（之前学的所有内容组件配置对象都可以使用）
    //   // data必须写成函数形式
    //   data() {
    //     // 返回值对象，就是data数据
    //     return {
    //       num: 0
    //     }
    //   },
    //   methods: {
    //     handleClick() {
    //       this.num++
    //     }
    //   },
    //   mounted() {
    //     console.log('mounted');
    //   },
    //   // ...
    //   // 组件要渲染的模板页面
    //   // 要求：必须有根标签
    //   template: `<div>
    //     <p>{{num}}</p>
    //     <button @click="handleClick">按钮</button>
    //   </div>`
    // })

    // 3. 使用组件
    // 通过标签形式使用组件
    // 不用脚手架，使用组件名称是my-component才行，大驼峰不行
    // 将来使用脚手架，my-component和MyComponent都行了

    new Vue({
      el: '#app',
      // 注册局部组件
      components: {
        MyComponent: {
          // 组件配置对象（之前学的所有内容组件配置对象都可以使用）
          // data必须写成函数形式
          data() {
            // 返回值对象，就是data数据
            return {
              num: 0
            }
          },
          methods: {
            handleClick() {
              this.num++
            }
          },
          mounted() {
            console.log('mounted');
          },
          // ...
          // 组件要渲染的模板页面
          // 要求：必须有根标签
          template: `<div>
            <p>{{num}}</p>
            <button @click="handleClick">按钮</button>
          </div>`
        }
      }
    })
  </script>
</body>

</html>